import {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import {TBookItem} from '../../types/book';
import {openUrl, replaceDouBanImg} from '../../utils/url';

export interface BookListProps {
  list: TBookItem[];
}

const BookItem = (props: {data: TBookItem}) => {
  const {data} = props;
  const {rating} = data;
  return (
    <TouchableWithoutFeedback
      onPress={() => {
        openUrl(data.detailLink);
      }}>
      <View style={styles.bookItem}>
        {/* pic */}
        <Image
          style={styles.bookItemPic}
          source={{
            uri: replaceDouBanImg(data.pic),
          }}
        />
        {/* title */}
        <View>
          <Text>{data.title}</Text>
        </View>
        {/* rating */}
        {rating > 0 ? (
          <View>
            <Text>{rating}</Text>
          </View>
        ) : null}

        {/* description */}
        <View>
          <Text>{data.description}</Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

const BookList = (props: BookListProps) => {
  const {list} = props;
  return (
    <ScrollView>
      <View style={styles.bookList}>
        {list?.map((data, index) => {
          return <BookItem data={data} key={index}></BookItem>;
        })}
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  bookList: {
    backgroundColor: '#fff',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    paddingTop: 20,
  },
  bookItem: {
    width: '31%',
    marginBottom: 30,
  },
  bookItemPic: {
    width: '100%',
    height: 181,
  },
});

export default BookList;
